<div id="xoview-home-index" class="xpage page-home-index">
    <style>
        .page-home-index{background:#fff;}
        .brand,.cate{position:relative;width:100%;height:38.2%;text-align:center;}
        .cate{height:61.8%;z-index:1;font-family:Lato;}
        .brand{background-color:#23232e;font-family:Lato;z-index:2;}
        .brand-logo{position:absolute;top:100%;margin-top:-75px;left:50%;margin-left:-75px;}
        .brand-logo img{width:150px;height:150px;padding:2px;background:#000;border-radius:50%;-webkit-border-radius:50%;}
        .cate-title{margin-top:95px;font-size:24px;color:#333;}
        .cate-subtitle{padding-left:10px;padding-right:10px;}
        .cate-list{list-style:none;transition:all .25s ease-out;border-top:1px solid #ddd;padding:5px 0 0 0;margin:.8em 0;}
        .cate-list a{display:block;height:32px;line-height:32px;}
    </style>
    <div class="brand">
        <div class="brand-logo" id="brandLogo">
            <img src="assets/mtips/pic/logo.png" alt="Mobi Webdev Handbook"/>
        </div>
    </div>

    <div class="cate">
        <h1 class="cate-title">Mobi Webdev Handbook</h1>
        <p class="cate-subtitle">基于<a href="http://github.com/xsin/xo">XO.JS</a>，共收集<span class="badge badge-primary">20+</span>问题与技巧。</p>
        <ul id="cateList" class="cate-list">
            <li><a href="#home/list1">Appearance</a></li>
            <li><a href="#home/list2">Behavior</a></li>
            <li><a href="#home/list3">Performance</a></li>
            <li><a href="#home/list4">Tools</a></li>
        </ul>
        <p class="fav-links">
        <iframe src="//ghbtns.com/github-btn.html?user=tgideas&amp;repo=mtips&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe>
        </p>
    </div>

    <script>
        var $list = $("#cateList");
        $("#brandLogo").on("click",function(e){
            $list.toggleClass('callout');
        });
    </script>

</div>

